<ui:composition
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:nxd="http://nuxeo.org/nxweb/document"
  xmlns:a4j="http://richfaces.org/a4j">
<div id="#{widget.id}">

<c:if test="#{widget.mode != 'create' and widget.mode != 'edit'}">

  <h:dataTable value="#{field_0}" var="path"
    rendered="#{not empty field_0}">
    <h:column>
      <h:outputText value="#{nxd:titleOrId(treeWidgetActions.getDocumentFromPath(path))}" />
    </h:column>
  </h:dataTable>

</c:if>

<c:if test="#{widget.mode == 'create' or widget.mode == 'edit'}">

  <h:outputScript target="#{pageJsTarget}">
    jQuery(document).ready(function() {
      var config = {
        'width'              : '50%',
        'height'             : '75%',
        'autoScale'          : false,
        'autoDimensions'     : false,
        'transitionIn'       : 'none',
        'transitionOut'      : 'none',
        'type'               : 'inline',
        'enableEscapeButton' : true,
        'centerOnScroll'     : true
      };
      jQuery("##{widget.id}_openPopup").fancybox(config);

      if (jQuery('.#{widget.id}_inputHidden').val()) {
        jQuery("##{widget.id}_openPopup").hide();
      } else {
        jQuery(".#{widget.id}_deleteSingleValueLink").hide();
      }
    });

    function set#{widget.id}SingleValue(label, path) {
      jQuery('##{widget.id}_openPopup').hide();
      jQuery('.#{widget.id}_outputText').text(label);
      jQuery('.#{widget.id}_inputHidden').val(path);
      jQuery('.#{widget.id}_deleteSingleValueLink').show();
      jQuery.fancybox.close();
      return false;
    }

    function remove#{widget.id}SingleValue() {
      jQuery('##{widget.id}_openPopup').show();
      jQuery('.#{widget.id}_outputText').text('');
      jQuery('.#{widget.id}_inputHidden').val('');
      jQuery('.#{widget.id}_deleteSingleValueLink').hide();
      return false;
    }

  </h:outputScript>

  <a id="#{widget.id}_openPopup" href="##{widget.id}_tree" class="button smallButton">#{messages['command.add']}</a>
  <div style="clear: both;"></div>

  <div style="display:none">
    <div id="#{widget.id}_tree">
      <h3>
        <h:outputText value="#{messages['label.search.popup.title']}"/>
      </h3>
      <rich:tree preserveModel="none"
        ajaxChildActivationEncodeBehavior="none"
        ajaxNodeSelectionEncodeBehavior="none"
        id="#{widget.id}_treeId"
        toggleListener="#{reducedTreeActions.toggleListener}"
        iconLeaf="#{nxd:iconPath(node.document)}"
        iconExpanded="#{nxd:iconPath(node.document)}"
        iconCollapsed="#{nxd:iconPath(node.document)}"
        rowKeyVar="rowKey"
        styleClass="labelTool"
        stateVar="nodeState"
        var="node">
        <rich:treeModelRecursiveAdaptor
          id="#{widget.id}_recursiveTreeNodesAdaptorId"
          roots="#{widget.properties.showAllDomains ? reducedTreeActions.rootNode : reducedTreeActions.treeRoots}"
          nodes="#{node.children}"
          leaf="#{node.children == null or node.children.size == 0}"
          styleClass="labelTool">
          <rich:treeNode
            id="#{widget.id}_treeNodeId"
            highlightedClass="treeNodeHighlightedClass"
            selectedClass="treeNodeSelectedClass">
            <h:commandLink immediate="true"
              id="#{widget.id}_linkId"
              actionListener="#{treeWidgetActions.setUIInputValue}"
              styleClass="treeLink" onclick="jQuery.fancybox.close();">
              <f:param name="selectionInputId" value="#{widget.id}_input" />
              <f:param name="selectedPath" value="#{node.path}" />
              <h:outputText value="#{nxd:titleOrId(node.document)}" />
              <f:ajax execute="@this" render="#{widget.id}_inputId" />
            </h:commandLink>
          </rich:treeNode>
        </rich:treeModelRecursiveAdaptor>
      </rich:tree>
    </div>
  </div>

  <a4j:outputPanel id="#{widget.id}_inputId" ajaxRendered="true"
   layout="block">
    <h:inputText value="#{field_0}" styleClass="#{widgetProperty_styleClass}"
      required="#{widgetProperty_required}" id="#{widget.id}_input" />
    <h:message styleClass="errorMessage" for="#{widget.id}_input"
      id="#{widget.id}_inputId_message" />
  </a4j:outputPanel>

</c:if>

</div>
</ui:composition>